<!DOCTYPE HTML>
<html lang="zh-CN">

<head><meta name="generator" content="Hexo 3.9.0">
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="ydong博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/blog/">
    <link rel="dns-prefetch" href="http://ydongabc.gitee.io/blog">
    <!--SEO-->

<meta name="keywords" content="常用,知识点">


<meta name="description" content="1.vs code 常用快捷键中途换行：Ctrl+Enter换到上一行开始：Ctrl+Shift+Enter移动行：alt + up/show选中当前行：Ctrl + L复制当前行：shift ...">


<meta name="robots" content="all">
<meta name="google" content="all">
<meta name="googlebot" content="all">
<meta name="verify" content="all">
    <!--Title-->

<title>
    
    常用杂碎知识点 |
    
    ydong博客
</title>

<link rel="alternate" href="/atom.xml" title="ydong博客" type="application/atom+xml">


<link rel="icon" href="./favicon.ico">

    

<link rel="stylesheet" href="/blog/css/bootstrap.min.css?rev=3.3.7">
<link rel="stylesheet" href="/blog/css/font-awesome.min.css?rev=4.7.0">
<link rel="stylesheet" href="/blog/css/style.css?rev=@@hash">
    
<div class="hide">
    <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>




    

</head></html>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    /blog/./img/banner.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='John Doe'>
            <img src="/blog/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <img src="/blog/img/branding.png" alt="Snippet 博客主题" class="img-responsive center-block">
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="http://ydongabc.gitee.io/blog">
                        ydong博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog"><i class="fa "></i>
                                首页</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/前端/"><i class="fa "></i>
                                前端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/后端/"><i class="fa "></i>
                                后端</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/categories/工具/"><i class="fa "></i>
                                工具</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/blog/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="常用杂碎知识点">
            
            常用杂碎知识点
            
        </h1>
        <div class="post-meta">
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        <a class="category-link" href="/blog/categories/前端/">前端</a> <a class="category-link" href="/blog/categories/前端/知识点/">知识点</a>
    </span>
    
    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
            <a class="tag-link" href="/blog/tags/常用/">常用</a> <a class="tag-link" href="/blog/tags/知识点/">知识点</a>
            
        </span>
    </span>
    
    
    
    <span class="fa-wrap">
        <i class="fa fa-clock-o"></i>
        <span class="date-meta">
            2019/10/05</span>
    </span>
    
    
</div>
        
        
    </div>
    
    <div class="post-body post-content">
        <h3 id="1-vs-code-常用快捷键"><a href="#1-vs-code-常用快捷键" class="headerlink" title="1.vs code 常用快捷键"></a><strong>1.vs code 常用快捷键</strong></h3><p>中途换行：<code>Ctrl+Enter</code><br>换到上一行开始：<code>Ctrl+Shift+Enter</code><br>移动行：<code>alt + up/show</code><br>选中当前行：<code>Ctrl + L</code><br>复制当前行：<code>shift + alt +up/down</code><br>删除当前行：<code>shirt + ctrl + k</code><br>剪切当前行：<code>Ctrl + X</code></p>
<p>查找：<code>Ctrl + F</code><br>替换：<code>Ctrl + H</code><br>同时选中相同字符批量更改：<code>Ctrl  + D</code>（想选多少个就按多少下）</p>
<p>代码格式化：<code>shift + alt +f</code><br>格式化选中代码：<code>ctrl + f</code></p>
<p>收起/展开 侧边栏：<code>ctrl + b</code><br>多行缩进：<code>Ctrl + [</code> 和 <code>Ctrl + ]</code> 向左和向右移<br>光标移到行末尾：<code>shirt+end</code> （end为小键盘上的数字1）<br>关闭当前页面：<code>Ctrl+w</code></p>
<h3 id="2-常用转义字符"><a href="#2-常用转义字符" class="headerlink" title="2.常用转义字符"></a><strong>2.常用转义字符</strong></h3><p>空格：<code>&amp;nbsp;</code><br>左箭头&lt;：<code>&amp;lt;</code><br>右箭头&gt;：<code>&amp;gt;</code><br>符号&amp;：<code>&amp;amp;</code><br>符号&copy;：<code>&amp;copy;</code><br>引号”：<code>&amp;quot;</code><br>(注：分号不能省略)</p>
<h3 id="3-css提升优先级属性：-important的使用"><a href="#3-css提升优先级属性：-important的使用" class="headerlink" title="3.css提升优先级属性：!important的使用"></a><strong>3.css提升优先级属性：!important的使用</strong></h3><p>属性: 值 !important;<br>例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">20px</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="4-CSS相关"><a href="#4-CSS相关" class="headerlink" title="4.CSS相关"></a><strong>4.CSS相关</strong></h3><p>文本首行缩进2个字符：<code>text-indent: 2em;</code></p>
<p>文字间距：<code>letter-spacing: 2px;</code></p>
<p>文字超出长度用省略号…替代：<code>text-overflow:ellipsis;</code></p>
<p>允许长单词自动换行：<code>word-wrap: break-word;</code></p>
<p>强制不换行：<code>white-space:nowrap;</code></p>
<p>文字竖排：<code>writing-mode: vertical-lr;</code></p>
<p>透明度：<code>opacity: 0.5;</code><br><code>filter:Alpha(opacity=50);</code> (<em>IE8老版本兼容</em>)</p>
<p>css3盒子模型：<code>box-sizing: border-box;</code></p>
<p>点击触发背景高亮：<code>-webkit-tap-highlight-color: transparent;</code> （设为transparent则为透明无色）</p>
<p>禁用长按页面时弹出菜单：<code>-webkit-touch-callout: none;</code></p>
<p>允许自定义ios端按钮和输入框的样式：<code>-webkit-appearance: none;</code></p>
<p>通配符：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">*&#123;</span><br><span class="line">     <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">     <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>a标签相关：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span>&#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;     <span class="comment">/*取消文本修饰效果*/</span></span><br><span class="line">    <span class="attribute">text-decoration</span>:underline；<span class="comment">/*添加下划线*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123;<span class="attribute">color</span>: <span class="number">#FF0000</span>&#125;     <span class="comment">/* 未访问的链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;<span class="attribute">color</span>: <span class="number">#00FF00</span>&#125;  <span class="comment">/* 已访问的链接 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;<span class="attribute">color</span>: <span class="number">#FF00FF</span>&#125;    <span class="comment">/* 当有鼠标悬停在链接上 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;<span class="attribute">color</span>: <span class="number">#0000FF</span>&#125;   <span class="comment">/* 被选择的链接 */</span></span><br></pre></td></tr></table></figure>

<p>margin水平居中：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto; <span class="comment">/*上下0px，左右自适应*/</span></span><br><span class="line">    <span class="attribute">margin</span>: 上，右，下，左;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>vertical-align: middle 垂直居中：</p>
<pre><code>&lt;p&gt;&lt;span style=&quot;display:inline-block;vertical-align: middle&quot;&gt;使span在p中垂直居中&lt;/span&gt;&lt;/p&gt;</code></pre><p>(注：需配合 display:inline-block 使用)</p>
<p>给含有该字符的类添加css属性：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-attr">[class*="类名或类名的部分字符"]</span>&#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>隐藏底部滚动条：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>&#123;</span><br><span class="line">    <span class="attribute">overflow-x</span>:hidden;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>瀑布流：(图片与文字均可用)</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">       <span class="attribute">column-count</span>: <span class="number">3</span>;				<span class="comment">/*把div元素内容分为3列*/</span></span><br><span class="line">       <span class="attribute">column-width</span>: <span class="number">350px</span>;			<span class="comment">/*每列宽350px*/</span></span><br><span class="line">       <span class="attribute">column-gap</span>: <span class="number">30px</span>;				<span class="comment">/*列与列间距30px*/</span></span><br><span class="line">       <span class="attribute">column-rule</span>: <span class="number">4px</span>  outset  <span class="number">#FF00FF</span>;	<span class="comment">/*列间隔线的宽度、样式和颜色*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>属性选择器：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-attr">[title]</span>&#123;</span><br><span class="line">     <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<pre><code>&lt;p title=&quot;&quot;&gt;字体变红&lt;/p&gt;    </code></pre><p>添加字体文件（css里添加）：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">@<span class="keyword">font-face</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>:<span class="string">"名称"</span>; </span><br><span class="line">    <span class="attribute">src</span>: <span class="built_in">url</span>(字体文件.ttf);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>banner背景图铺满：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.banner</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(../img/jianying.jpg) <span class="number">50%</span> <span class="number">50%</span> / cover no-repeat scroll; <span class="comment">/*scroll改为fixed则可以固定*/</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>(注：background是一个集合，它包括background-color,background-image,background-size等等，当你改变background时，他会把你之前的background下的子样式覆盖。)</p>
<p>背景图片固定：<code>background-attachment: fixed;</code></p>
<p>圆角边框：<code>border-radius:10px;</code></p>
<p>边框阴影：<code>box-shadow: 10px 10px 5px #888888 inset;</code><br>(<em>阴影右移 阴影下移  阴影清晰度 颜色  内阴影</em>)</p>
<p>自定义图片边框：<code>border-images:url(&quot;img.png&quot;) 0 15 0 15 round;</code><br>(<em>0 15 0 15 指的是：图片边框向内偏移 上0，右15 ，下0 ，左15</em>)</p>
<h3 id="5-网站title左边加小图标"><a href="#5-网站title左边加小图标" class="headerlink" title="5.网站title左边加小图标"></a><strong>5.网站title左边加小图标</strong></h3><pre><code>&lt;link rel=&quot;icon&quot; href=&quot;/image/favicon.ico&quot; type=&quot;img/x-ico&quot; /&gt;</code></pre><h3 id="6-json序列化和反序列化"><a href="#6-json序列化和反序列化" class="headerlink" title="6.json序列化和反序列化"></a><strong>6.json序列化和反序列化</strong></h3><p>序列化：将json对象转换为字符串 <code>JSON.stringify()</code><br>反序列化：将字符串数据转换为json对象 <code>JSON.parse()</code><br>(注：JSON必须大写)</p>
<h3 id="7-事件相关"><a href="#7-事件相关" class="headerlink" title="7.事件相关"></a><strong>7.事件相关</strong></h3><p>阻止对元素的默认处理方式：event.preventDefault()<br>返回事件目标节点：ev.target</p>
<h3 id="8-定位相关"><a href="#8-定位相关" class="headerlink" title="8.定位相关"></a><strong>8.定位相关</strong></h3><p>定位：</p>
<ul>
<li>position：static          /<em>默认，不受left，right等位移属性影响</em>/                               </li>
<li>position：relative      /<em>相对定位，一般加在父级对象</em>/</li>
<li>position：absolute   /<em>绝对定位，悬浮不占位置</em>/</li>
<li>position：fixed         /<em>绝对固定定位，相对于浏览器窗口进行定位，不受滚动条影响，页面小广告</em>/</li>
<li>z-index：    1            /<em>设置元素的堆叠顺序，数值一般100以下</em>/</li>
</ul>
<p>浮动：<br>float：left，right，none（不浮动），inherit（继承父级的）</p>
<p>清除浮动：<br>clear：left，right，both（清除两侧）</p>
<p>overflow：规定当内容溢出元素框时发生的事情。</p>
<ul>
<li>visible           /<em>默认值。内容不会被修剪，会呈现在元素框之外。</em>/</li>
<li>hidden         /<em>溢出内容会被修剪，不可见</em>/</li>
<li>scroll            /<em>溢出内容会被修剪，但浏览器会显示滚动条以便查看其内容。</em>/</li>
<li>auto             /<em>如果内容被修剪，则浏览器会显示滚动条以便查看其内容。</em>/</li>
</ul>
<h3 id="9-css3-hover动画"><a href="#9-css3-hover动画" class="headerlink" title="9.css3 hover动画"></a><strong>9.css3 hover动画</strong></h3><p>transform属性：</p>
<ul>
<li>translate(x,y)        /<em>定义 2D 转换相对原本位置的平移</em>/</li>
<li>rotate(角度数值+deg)        /<em>定义 2D 旋转，在参数中规定角度</em>/       /<em>angle即角度数值+deg，例：90deg</em>/</li>
<li>rotateX(angle)        /<em>定义沿着 X 轴的 3D 旋转</em>/</li>
<li>rotateY(angle)         /<em>定义沿着 Y 轴的 3D 旋转</em>/</li>
<li>scale(x,y)        /<em>定义 2D 缩放转换</em>/</li>
<li>skew(x-angle,y-angle)        /<em>定义沿着 X 和 Y 轴的 2D 倾斜转换</em>/</li>
</ul>
<p>过渡：<br>transition 属性是一个简写属性，用于设置四个过渡属性：</p>
<ul>
<li>transition-property               /<em>CSS 属性</em>/</li>
<li>transition-duration               /<em>过渡时间</em>/</li>
<li>transition-timing-function   /<em>速度效果</em>/</li>
<li>transition-delay                     /<em>等待多久开始</em>/</li>
</ul>
<p>例：<br>transition：width 2s linear 2s；  /<em>宽度  过渡时间2秒  linear默认效果相同速度  等待2秒开始</em>/</p>
<p>一般用法：<br>transition：属性+过渡时间       （例：transition：width 2s，transform 2s；） /<em>浏览器谷歌兼容书写：-webkit-transition：width 2s，-webkit-transform 2s；</em>/<br>例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background</span>: red;</span><br><span class="line">    <span class="attribute">-webkit-transform</span>: <span class="built_in">rotate</span>(45deg);</span><br><span class="line">    <span class="attribute">transition</span>: width <span class="number">2s</span>,height <span class="number">2s</span>,-webkit-transform <span class="number">2s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">:hover</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">-webkit-transform</span>: <span class="built_in">rotate</span>(360deg);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="10-animation动画"><a href="#10-animation动画" class="headerlink" title="10.animation动画"></a><strong>10.animation动画</strong></h3><p>animation 属性是一个简写属性，用于设置六个动画属性：（需按顺序设置）<br>     1.animation-name                        /<em>keyframe 名称</em>/<br>     2.animation-duration                   /<em>动画播放时间</em>/<br>     3.animation-timing-function       /<em>速度效果</em>/<br>     4.animation-delay                        /<em>等待多久开始</em>/<br>     5.animation-iteration-count        /<em>播放次数</em>/         （ infinite 无限次 ）<br>     6.animation-direction                  /<em>是否应该轮流反向播放动画</em>/    （normal    默认值，动画正常播放。alternate 轮流反向播放）<br>例：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background</span>:red;</span><br><span class="line">    <span class="attribute">position</span>: relative;   </span><br><span class="line">    animation: name 5s 3 alternate; (动画名称 播放5s 播放3次 轮向播放)     /*  -webkit-animation:兼容写法 */    </span><br><span class="line">  &#125;</span><br><span class="line"> @<span class="keyword">keyframes</span> name&#123;                                                                                    <span class="comment">/*  @-webkit-keyframes 兼容写法 */</span></span><br><span class="line">    0%&#123;<span class="attribute">background</span>:red;<span class="attribute">left</span>:<span class="number">0px</span>;<span class="attribute">top</span>:<span class="number">0px</span>;&#125;</span><br><span class="line">    25%&#123;<span class="attribute">background</span>:yellow;<span class="attribute">left</span>: <span class="number">100px</span>;<span class="attribute">top</span>:<span class="number">0px</span>;&#125;</span><br><span class="line">    50%&#123;<span class="attribute">background</span>:blue;<span class="attribute">left</span>:<span class="number">100px</span>;<span class="attribute">top</span>:<span class="number">100px</span>;&#125;</span><br><span class="line">    75%&#123;<span class="attribute">background</span>: green;<span class="attribute">left</span>:<span class="number">0px</span>;<span class="attribute">top</span>:<span class="number">100px</span>;&#125;</span><br><span class="line">   100%&#123;<span class="attribute">background</span>: red;<span class="attribute">left</span>:<span class="number">0px</span>;<span class="attribute">top</span>:<span class="number">0px</span>&#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>

<h3 id="11-html5代码结构"><a href="#11-html5代码结构" class="headerlink" title="11.html5代码结构"></a><strong>11.html5代码结构</strong></h3><p>article：独立完整的内容块，aside：附属信息，如侧边栏广告导航条等</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">！--</span> 顶部<span class="attr">--</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">header</span>&gt;</span>                     </span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>标题<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">nav</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">a</span>&gt;</span>帮助<span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">！--</span> 主体内容<span class="attr">--</span>&gt;</span>   </span><br><span class="line"><span class="tag">&lt;<span class="name">article</span>&gt;</span>                     </span><br><span class="line">    <span class="tag">&lt;<span class="name">header</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>标题<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>大纲描述<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">article</span>&gt;</span> </span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">article</span>&gt;</span> </span><br><span class="line">    <span class="tag">&lt;<span class="name">footer</span>&gt;</span>                   </span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>底部<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">！--</span> 底部<span class="attr">--</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span>&gt;</span>                   </span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>底部<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br></pre></td></tr></table></figure>
    </div>
    
    <div class="post-footer">
        <div>
            
            转载声明：
            商业转载请联系作者获得授权,非商业转载请注明出处 © <a href="" target="_blank">Snippet</a>
            
            
        </div>
        <div>
            
        </div>
    </div>
</article>
<div class="article-nav prev-next-wrap clearfix">
    
    <a href="/blog/2019/10/12/axios的基本使用/" class="pre-post btn btn-default" title='axios的基本使用'>
        <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
        <span class="hidden-xs">
            axios的基本使用</span>
    </a>
    
    
    <a href="/blog/2019/10/05/前端开发中79条不可忽视的知识点汇总/" class="next-post btn btn-default" title='前端开发中79条不可忽视的知识点汇总'>
        <span class="hidden-lg">下一篇</span>
        <span class="hidden-xs">
            前端开发中79条不可忽视的知识点汇总</span><i class="fa fa-angle-right fa-fw"></i>
    </a>
    
</div>

                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">
            文章目录
        </h3>
        
        <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#1-vs-code-常用快捷键"><span class="toc-text">1.vs code 常用快捷键</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-常用转义字符"><span class="toc-text">2.常用转义字符</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-css提升优先级属性：-important的使用"><span class="toc-text">3.css提升优先级属性：!important的使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-CSS相关"><span class="toc-text">4.CSS相关</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-网站title左边加小图标"><span class="toc-text">5.网站title左边加小图标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-json序列化和反序列化"><span class="toc-text">6.json序列化和反序列化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-事件相关"><span class="toc-text">7.事件相关</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-定位相关"><span class="toc-text">8.定位相关</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#9-css3-hover动画"><span class="toc-text">9.css3 hover动画</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#10-animation动画"><span class="toc-text">10.animation动画</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#11-html5代码结构"><span class="toc-text">11.html5代码结构</span></a></li></ol>
        
    </div>
</aside>
                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2017
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>



<script src="/blog/js/app.js?rev=@@hash"></script>
</body>
</html>